<template>
    <header class="header">
        <div class="left">
            <img class="img" :src="STATIC + 'img/school_logo.png'" alt=""
                 onerror="this.src='/static/img/logo.png';this.onerror=null">
            <span class="title">{{TITLE}}</span>

            <span class="port">{{ user.getChineseIdentity }}端</span>
        </div>
        <div class="right">
            <span class="username">{{user.info.name}}</span>
            <img :src="user.info.head" alt="">
        </div>
    </header>
</template>

<script setup>
import {useUserStore} from "@/stores/user";
import {STATIC, TITLE} from "@/assets/server";
const user = useUserStore()
</script>

<style scoped lang="less">
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--height-header);
    line-height: var(--height-header);
    background: linear-gradient( 90deg, #FBFBFE 0%, rgba(255,255,255,0) 100%);
    padding: 0 1%;
    .left {
        height: 70%;
        display: flex;
        align-items: center;
        img, span {
            display: flex;
            align-items: center;
            height: 100%;
            margin: 0 10px;
            vertical-align: middle;
        }
        .title{
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 1px;
            font-family: "Noto Sans SC", sans-serif;
        }
        .port{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 78px;
            height: 30px;
            border-radius: 4px 4px 4px 4px;
            background-color: var(--color-background-purple-soft);
            color: var(--color-text-purple-mute);
            font-weight: 500;
        }
    }

    .right {
        display: flex;
        justify-content: space-evenly;
        width: 15%;
        .username{
            color: var(--color-text-black-mute);
            letter-spacing: 1px;
            font-family: "Noto Sans SC", sans-serif;
        }
        //头像
        img {
            width: 7vh;
            height: 7vh;
            border-radius: 50%;
        }


    }
}
</style>